<template>
  <scroller :show-scrollbar="false" scroll-direction="horizontal" class="categories-list">
    <div class="categories-item" v-for="(item, index) in list" @click="changeIndex(index)">
      <text class="categories-item-text" v-bind:class="{'categories-item-text-selected': index === currentIndex}">{{ item.title }}</text>
    </div>
  </scroller>
</template>

<script>
import utils from '../utils/utils.js'
export default {
  name: 'Categories',
  components: {
  },
  data () {
    return {
      list: [{ title: '推荐' }],
      currentIndex: ''
    }
  },
  props: {
    categoryId: Number,
    index: Number
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var url = '/yq/item/categories';
      var params = {};
      var success = res => {
        console.log(res);
        this.list = this.list.concat(res.info);
        if (this.categoryId) {
          for (var i = 0; i < this.list.length; i ++) {
            if (this.list[i].id == this.categoryId) {
              this.currentIndex = i;
            }
          }
        } else if (this.index !== null && this.index !== '') {
          this.currentIndex = this.index;
        }
      }
      var fail = res => {}
      utils.request(url, params, success, fail);
    },
    changeIndex(index) {
      this.currentIndex = index;
      this.$emit('index-changed', index);
    }
  }
}
</script>

<style scoped>
.categories-list {
  flex-direction: row;
  width: 750px;
  height: 100px;
}
.categories-item {
  padding: 20px;
  flex-direction: row;
  align-items: center;
  height: 100px;
}
.categories-item-text {
  color: #888;
}
.categories-item-text-selected {
  color: #333;
  font-weight: bold;
}
</style>
